<template>
	<div>
		<div style="margin: 10px;">
			<div style="display: flex;">
				<el-button>订单号&nbsp;&nbsp;&nbsp;</el-button>
				<el-input>{{ddh}}</el-input>
			</div>
			<div style="display: flex;">
				<el-button>收获地址</el-button>
				<el-input>123</el-input>
			</div>
			<div style="display: flex;">	
				<el-button>收获电话</el-button>
				<el-input>123</el-input>
			</div>
			<div style="display: flex;">
				<el-button>付款状态</el-button>
				<el-button type="danger" @click="btn()"  :style="{backgroundColor:zhuangtai?'green':'red'}">{{zhuangtai == false ? '未付款，点击这里去扫描付款':'已付款'}}</el-button>
			</div>
		</div>
		<div>
			<el-table :data="mx">
			  <el-table-column label="图片" width="100">
			    <template #default="scope">
			      <img
			        :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`"
			        style="width: 50px"
			      />
			      <!-- {{scope.row.picture}} -->
			    </template>
			  </el-table-column>
			
			  <el-table-column prop="name" label="商品名称" width="200">
			  </el-table-column>
			
			  <el-table-column prop="price" label="商品价钱" width="100">
			  </el-table-column>
			
			  <el-table-column prop="num" label="商品数量" width="100">
			  </el-table-column>
			
			  <el-table-column label="小计" width="100">
			    <template #default="scope">
			      <span>
			        {{ scope.row.num * scope.row.price }}
			      </span>
			    </template>
			  </el-table-column>
			</el-table>
		</div>
		<!--  -->
		<el-dialog v-model="dialogTableVisible" width="30%">
		  <span style="text-align: center;position: absolute; top:0; left: 0;right: 0;margin: 0 auto;bottom: 0;width: 150px;height: 50px;line-height: 50px;"
		    >支付金额{{zongjia}}元</span>
		  <div style="height: 300px;">
		    
		  </div>
		  <div style="text-align: center;">
			  <el-button @click="quxiao()">
				  取消
			  </el-button>
			  <el-button @click="zhifu()">
				  确定支付
			  </el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
// 拦截器
import instance from "../../ajax/index.js";
export default{
	name:"Payment",
	data(){
		return{
			ddh:'',
			mx:[],
			dialogTableVisible:false,
			// 总价
			zongjia:0,
			// 更改付款
			ispay:0,
			ordid:0,
			// 付款状态
			zhuangtai:false,
		}
	},
	created() {
		this.ddh = this.$route.params.id;
		console.log(this.$route.params.id);
		// 
		// /api/fore/ord/findInfoByOrdid/
		// 发起get请求，获取数据
		instance
		.get("/api/fore/ord/findInfoByOrdid/"+this.ddh)
		.then((res) => {
		  console.log(res.data.data);
		  this.mx = res.data.data.items;
		  this.zongjia = res.data.data.ord.amount;
		  // 
		  this.ispay = res.data.data.ord.ispay;
		  this.ordid = res.data.data.ord.ordid;
		})
		.catch((error) => {
		  console.log(error);
		});
	},
	methods:{
		btn(){
			this.dialogTableVisible = true;
		},
		// 取消
		quxiao(){
			this.dialogTableVisible = false;
		},
		// 确定支付
		zhifu(){
			let that = this;
			let obj = {
			  ispay: that.ispay,
			  ordid: that.ordid
			};
			// console.log(obj);/api/fore/ord/addPay
			instance
			  .post("/api/fore/ord/addPay", JSON.stringify(obj), {
			    // 告知服务器本次请求的方式以及编码格式
			    headers: { "Content-Type": "application/json" },
			  })
			  .then((res) => {
			    console.log(res);
				this.dialogTableVisible = false;
				this.zhuangtai = true;
			  })
			  .catch((error) => {
			    console.log(error);
			  });
		}
	}
}
</script>

<style >

</style>